<template>
	<view class="contain">
		<view class="search"><u-search placeholder="搜索产品" v-model="keyword" @search="doSearch" @custom="doSearch"></u-search></view>
		<view class="history">
			<view class="head">
				<view>历史搜索</view>
				<view class="text-gray-400" @click="clearAll">清除</view>
			</view>
			<view class="body">
				<view class="utag" v-for="(item,index) in tagList.data" @click="searchText(item)" :key="index">
				<u-tag :text="item" shape="circle" color="#FFF" closeColor="#000" bgColor="#F56C6C" borderColor="#F56C6C" size="large" closable 
				@close="closedTag(index)"
				@click="searchText(item)"></u-tag></view>
			</view>
		</view>
		<!-- 热门商品 -->
		<view class="hot">
			<view class="hotTitle">
				<view>
					<u--image width="48rpx" height="48rpx" src="" mode="aspectFit"></u--image>
				</view>	
				<view class="ml-1"><i class="blod tracking-widest italic text-sm hotword">商品热搜榜</i></view>
			</view>
			<view class="hotBody">
				<view class="dataLine" v-for="(item,index) in hotProducts.data" :key="index" @click="GoUrl('../shop_detail/shop_detail?pid='+item.id)">
					<view class="No">
						<!-- 金牌 -->
						<u--image v-if="index===0" width="60rpx" height="57rpx"  src="" shape="square" :radius="10" mode="scaleToFill"></u--image>
						<!-- 银牌 -->
						<u--image v-if="index===1" width="60rpx" height="57rpx"  src="" shape="square" :radius="10" mode="scaleToFill"></u--image>
						<!-- 铜牌 -->
						<u--image v-if="index===2" width="60rpx" height="57rpx"  src="" shape="square" :radius="10" mode="scaleToFill"></u--image>
						<view v-if="index>2" class="text-gray-400 italic">{{index+1}}</view>
					</view>
					<view class="product">
						<view><u--image width="120rpx" height="120rpx"  :src="item.productimg" shape="square" :radius="10" mode="scaleToFill"></u--image></view>
						<view class="ml-2 text-sm">{{item.productname}}</view>
					</view>					
				</view>  <!-- dataLine End -->
			</view>
		</view>  <!-- hot End -->
	</view> <!-- contain End -->
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import {onShow,onLoad } from '@dcloudio/uni-app'
import { GoUrl } from '@/utils/utils'
import {getAllProducts } from '@/utils/apiFunction'

//产品信息
let keyword=ref<string>("");
let hotProducts=reactive({data:[1,2,3,4,5,6,7,8]});
const doSearch=()=>{
	if(/\S/.test(keyword.value)==false){
		console.log("请输入搜索关键词");
		return;
	}
	console.log("开始搜索",keyword.value)
	saveKeyWord(); //记录历史搜索
	GoUrl("../finalSearchProduct/finalSearchProduct?key="+encodeURIComponent(keyword.value));
}
let tagList=reactive({
	data:[] //"神奇的印度111","222","333","444","555","666"
});
//console.log("tagList.data",tagList.data)
const closedTag=(index:number)=>{
	console.log("标签索引",index)
	tagList.data.splice(index,1);
	uni.setStorageSync("historyKeyWord",tagList.data)
}
const searchText=(txtVal:string)=>{
	keyword.value=txtVal;
	doSearch();
}
const clearAll=()=>{
	uni.showModal({
		title: '操作提示',
		content: '是否清空全部历史搜索',
		showCancel: true,
		cancelText: '取消',
		confirmText: '清空',
		success: res => {
			if (res.confirm) {
				tagList.data=[];
				uni.removeStorageSync("historyKeyWord")
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		},
	});
}

//记录历史记录
const saveKeyWord=():void=>{
	let temp=reactive<any>({data:[]});
	//读取缓存
	if(uni.getStorageSync("historyKeyWord")){
		temp.data=uni.getStorageSync("historyKeyWord");
	}
	if(/\S/.test(keyword.value)==true){
		let index:number=temp.data.findIndex(item=>item==keyword.value);
		if(index==-1){
			console.log("历史值不存在,开始存储值",keyword.value);
			temp.data.push(keyword.value)
			uni.setStorageSync("historyKeyWord",temp.data)
			updateHistoryDatas(); //更新历史数据
		}else{
			console.log("历史值已存在")
		}
	}
}

//更新数据
const updateHistoryDatas=()=>{
	//读取缓存
	if(uni.getStorageSync("historyKeyWord")){
		tagList.data=[];
		tagList.data=uni.getStorageSync("historyKeyWord");
	}	
}

onShow(()=>{
	//更新数据
	updateHistoryDatas();
})

onLoad(()=>{
	
	getAllProducts().then(res=>{
		console.log("产品信息",res)
		if(res.data.code===200){
			hotProducts.data=res.data.data;
			//按销量排序
			hotProducts.data.sort((objA:any, objB:any)=>{ 
				return objB.productselled - objA.productselled; //降序排列
			});
			console.log("产品排序后",hotProducts.data)
	    }
	}); //获取产品信息
	
	//更新数据
	updateHistoryDatas();	
})

</script>

<style lang='scss' scoped>
	@import "search.scss";
</style>